<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<!--  双向绑定-->
  <input type="text" v-model="message">{{message}}
  <hr>
<!--  input 有个监听事件，用于监听用户输入，反向绑定message的值，实现双向绑定-->
  <input type="text" :value="message" @input="message=$event.target.value">{{message}}
  <hr>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data:{
      message:"Hello zk I am Vue !"
    },
    methods:{
      valueChange(event) {
        //一旦在界面中产生一个事件，浏览器会自动生成一个event对象
        //enent对象中，有我们需要value,在event中的target中
        //在调用函数中，如果省略的实参，而定义函数时，有形参，会自动将event当做实参传入
        this.message = event.target.value
      }
    }
  })
</script>
</body>
</html>
